<template>
  <div class="report">
    <Header />
    <div class="Breadcrumbs">
      <!-- <Breadcrumb /> -->
      <el-button
        size="mini"
        class="pubBtn3"
        style="margin-right: 20px"
        type="button"
        @click="$router.push('/early')"
        ><router-link :to="{ path: '/early' }">返回</router-link></el-button
      >
      <el-breadcrumb separator="-">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          ><router-link :to="{ path: '/early' }"
            >专利预警</router-link
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><span class="no-redirect">专利月报</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="report_box">
      <el-main style="overflow-x: hidden">
        <p class="report_box_p sizeTow">{{ data.company }} - 专利月报</p>
        <p class="contextSize">本期范围：{{ data.start }} — {{ data.end }}</p>
        <div class="report_box_s">
          <div class="s_flex s_align_items s_justify_content report_box_s_o">
            <div class="report_items" @click="activeName = '1'">
              <div class="s_flex s_align_items s_justify_content">
                <span v-if="data.my_patent">{{ data.my_patent.count }}</span>
                <img src="../../../../public/icon1.jpg" alt="" />
              </div>
              <p>我的专利信息更新</p>
            </div>
            <div class="report_items" @click="activeName = '2'">
              <div class="s_flex s_align_items s_justify_content">
                <span v-if="data.rivals_patent">{{
                  data.rivals_patent.count
                }}</span>
                <img src="../../../../public/icon2.jpg" alt="" />
              </div>
              <p>竞争对手专利信息更新</p>
            </div>
            <div class="report_items" @click="activeName = '3'">
              <div class="s_flex s_align_items s_justify_content">
                <span v-if="data.college_patent">{{
                  data.college_patent.count
                }}</span>
                <img src="../../../../public/icon3.jpg" alt="" />
              </div>
              <p>产学研专利信息更新</p>
            </div>
          </div>
        </div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="`我的专利信息更新(${data.my_patent.count})`" name="1">
            <div>
              <div class="report_items_sz">审核（{{data.my_patent.list.k3.length>0?data.my_patent.list.k3.length:0}}）</div>
              <div v-if="data.my_patent.list.k3">
                <div
                  class="info_text"
                  v-for="(item, index) in data.my_patent.list.k3"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTow(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">授权（{{data.my_patent.list.k1.length>0?data.my_patent.list.k1.length:0}}）</div>
              <div v-if="data.my_patent.list.k1">
                <div
                  class="info_text"
                  v-for="(item, index) in data.my_patent.list.k1"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTow(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">失效（{{data.my_patent.list.k2.length>0?data.my_patent.list.k2.length:0}}）</div>
              <div v-if="data.my_patent.list.k2">
                <div
                  class="info_text"
                  v-for="(item, index) in data.my_patent.list.k2"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTow(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item :title="`竞争对手信息更新(${data.rivals_patent.count})`" name="2">
            <div>
              <div class="report_items_sz">审核（{{data.rivals_patent.list.k3.length>0?data.rivals_patent.list.k3.length:0}}）</div>
              <div v-if="data.rivals_patent.list.k3">
                <div
                  class="info_text"
                  v-for="(item, index) in data.rivals_patent.list.k3"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetails(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">授权（{{data.rivals_patent.list.k1.length>0?data.rivals_patent.list.k1.length:0}}）</div>
              <div v-if="data.rivals_patent.list.k1">
                <div
                  class="info_text"
                  v-for="(item, index) in data.rivals_patent.list.k1"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetails(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">失效（{{data.rivals_patent.list.k2.length>0?data.rivals_patent.list.k2.length:0}}）</div>
              <div v-if="data.rivals_patent.list.k2">
                <div
                  class="info_text"
                  v-for="(item, index) in data.rivals_patent.list.k2"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetails(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item :title="`产学研专利信息更新(${data.college_patent.count})`" name="3">
            <div>
              <div class="report_items_sz">审核（{{data.college_patent.list.k3.length>0?data.college_patent.list.k3.length:0}}）</div>
              <div v-if="data.college_patent.list.k3">
                <div
                  class="info_text"
                  v-for="(item, index) in data.college_patent.list.k3"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTre(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">授权（{{data.college_patent.list.k1.length>0?data.college_patent.list.k1.length:0}}）</div>
              <div v-if="data.college_patent.list.k1">
                <div
                  class="info_text"
                  v-for="(item, index) in data.college_patent.list.k1"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTre(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="report_items_sz">失效（{{data.college_patent.list.k2.length>0?data.college_patent.list.k2.length:0}}）</div>
              <div v-if="data.college_patent.list.k2">
                <div
                  class="info_text"
                  v-for="(item, index) in data.college_patent.list.k2"
                  :key="index"
                >
                  <div>
                    <span class="Subhead">{{ item.pns }}</span>
                    <el-tag
                      class="patent_tag_sq"
                      effect="dark"
                      v-if="item.status"
                      >{{ item.status }}</el-tag
                    >
                    <el-tag
                      style="height: 25px; line-height: 25px"
                      effect="plain"
                      type=""
                      v-if="item.event"
                      >{{ item.event }}</el-tag
                    >
                  </div>
                  <div>
                    <span class="sz">{{ item.tic }}</span>
                  </div>
                  <div>
                    <p class="context" style="color: #8f9bb2">
                      申请日:{{ item.ad }} 公开日:{{
                        item.pd
                      }}
                      当前申请(专利权)人:{{ item.asc }}
                    </p>
                  </div>
                  <div>
                    <p class="context w">
                      {{ item.absc }}
                    </p>
                  </div>
                  <div>
                    <el-button
                      class="seeZl context"
                      type="text"
                      @click="goDetailsTre(item.pid)"
                      >查看专利></el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- <div class="patent_info">
          <p class="sizeTow Subhead_mr" v-if="data.my_patent">{{data.my_patent.count>0?`您有${data.my_patent.count}条专利更新提醒:`:'您的专利没有更新提醒'}}</p>
          <div class="info_text" v-for="(item,index) in data.my_patent.list" :key="index">

            <div>
              <span class="Subhead">{{item.pns}}</span>
              <el-tag class="patent_tag_sq" effect="dark" v-if="item.status">{{item.status}}</el-tag>
              <el-tag style="height:25px;line-height:25px;" effect="plain" type="" v-if="item.event">{{item.event}}</el-tag>
            </div>
            <div>
              <span class="sz">{{item.tic}}</span>
            </div>
            <div>
              <p class="context" style="color:#8F9BB2;">申请日:{{item.ad}}    公开日:{{item.pd}}  当前申请(专利权)人:{{item.asc}}</p>
            </div>
            <div>
              <p class="context w">
                 {{item.absc}}
              </p>
            </div>
            <div>
              <el-button class="seeZl context" type="text" @click='goDetails(item.pid)'>查看专利></el-button>
            </div>
          </div>
        </div>
        <div class="patent_info">
          <p class="sizeTow Subhead_mr" v-if="data.rivals_patent">{{data.rivals_patent.count>0?`您的竞争对手有${data.rivals_patent.count}条专利更新提醒:`:'您关注的竞争对手没有专利更新提醒'}}</p>
          <div class="info_text" v-for="(item,index) in data.rivals_patent.list" :key="index">
            <div>
              <span class="Subhead">{{item.pns}}</span>
              <el-tag class="patent_tag_sq" effect="dark" v-if="item.status">{{item.status}}</el-tag>
              <el-tag style="height:25px;line-height:25px;" effect="plain" type="" v-if="item.event">{{item.event}}</el-tag>
            </div>
            <div>
              <span class="sz">{{item.tic}}</span>
            </div>
            <div>
              <p class="context" style="color:#8F9BB2;">申请日:{{item.ad}}    公开日:{{item.pd}}  当前申请(专利权)人:{{item.asc}}</p>
            </div>
            <div>
              <p class="context w">
                 {{item.absc}}
              </p>
            </div>
            <div>
              <el-button class="seeZl context" type="text" @click='goDetailsTow(item.pid)'>查看专利></el-button>
            </div>
          </div>
        </div>
        <div class="patent_info">
          <p class="sizeTow Subhead_mr" v-if="data.college_patent">{{data.college_patent.count>0?`您关注的产学研有${data.college_patent.count}条专利更新提醒:`:'您关注的产学研没有专利更新提醒'}}</p>
          <div class="info_text" v-for="(item,index) in data.college_patent.list" :key="index">
            <div>
              <span class="Subhead">{{item.pns}}</span>
              <el-tag class="patent_tag_sq" effect="dark" v-if="item.status">{{item.status}}</el-tag>
              <el-tag style="height:25px;line-height:25px;" effect="plain" type="" v-if="item.event">{{item.event}}</el-tag>
            </div>
            <div>
              <span class="sz">{{item.tic}}</span>
            </div>
            <div>
              <p class="context" style="color:#8F9BB2;">申请日:{{item.ad}}    公开日:{{item.pd}}  当前申请(专利权)人:{{item.asc}}</p>
            </div>
            <div>
              <p class="context w">
                 {{item.absc}}
              </p>
            </div>
            <div>
              <el-button class="seeZl context" type="text" @click='goDetailsTre(item.pid)'>查看专利></el-button>
            </div>
          </div>
        </div> -->
        <el-row style="margin: 35px auto">
          <el-col style="margin: 30px 30px 0" :lg="24">
            <p class="context">发布来源：youpat@shundeip.com</p>
            <p class="context" style="margin-top: 5px">发布频率：每周一</p>
            <p class="context" style="margin-top: 20px">
              本邮件为系统自动发送，请勿直接回复
            </p>
          </el-col>
          <el-col style="margin: 0px 30px" :lg="24">
            <div class="introduce">
              <div class="ewm">
                <img src="../../../../public/ewm.png" />
              </div>
              <div>
                <p class="context">关注公众号后绑定手机号码,</p>
                <p class="context" style="margin-top: 5px">
                  可获得微信专利周报推送。
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </div>
    <Service />
  </div>
</template>

<script>
import { search, pushShow } from "@/api";
import Header from "@/components/Header";
import Breadcrumb from "@/components/Breadcrumb";
import Service from "@/components/Service";
export default {
  components: {
    Header,
    Breadcrumb,
    Service,
  },
  data() {
    return {
      data: [],
      activeName: "1",
      tableData: [],
    };
  },
  async mounted() {
    try {
      const id = this.$route.query.id;
      this.data = await pushShow({ push_id: id });
      // console.log(this.data.my_patent.count);
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  methods: {
    rowClick(row) {
       sessionStorage.setItem("pc", 0)
      this.$router.push({ path: "/detail", query: { pid: row.pid } });
    },
    goDetails(pid) {
       sessionStorage.setItem("pc", 0)
      this.$router.push({ path: "/detail", query: { pid: pid } });
    },
    goDetailsTow(pid) {
       sessionStorage.setItem("pc", 0)
      this.$router.push({ path: "/detail", query: { pid: pid } });
    },
    goDetailsTre(pid) {
       sessionStorage.setItem("pc", 0)
      this.$router.push({ path: "/detail", query: { pid: pid } });
    },
  },
};
</script>

<style scoped lang="less">
.pagination {
  margin: 15px 0;
}
.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 320px;
  margin-left: 0 !important;
}
.report .el-main {
  margin: 0;
  padding: 47px 0;
  .contextSize {
    color: #3478ff;
    margin-top: 20px;
    margin: 20px 30px;
  }
}
.report_box {
  width: 895px;
  margin: 20px 330px;
  border: 1px solid rgba(231, 234, 240, 1);
}
.report_box_p {
  font-weight: bold;
  color: rgba(62, 74, 102, 1);
  margin: 0 30px;
}
.Subhead_mr {
  margin: 0 30px;
}
.context_mr {
  margin: 20px 30px;
}
.report_info {
  // margin-bottom:46px;
}
.patent_info {
  // margin-top:20px;
  // padding:30px 0;
  .Subhead_mr {
    margin: 30px 30px 15px;
  }
}
.martop {
  margin: 40px 0 0 0;
}
.info_text {
  background-color: #f7f9fc;
  padding: 20px 30px 5px;
  border-top: 1px solid #e6e9f0;
  border-bottom: 1px solid #e6e9f0;
  div {
    margin-bottom: 19px;
    .Subhead {
      color: #2a8c2e;
      margin-right: 27px;
    }
  }
}
.patent_tag_sq {
  height: 24px;
  line-height: 24px;
  background: #45a321;
  border-radius: 4px;
  border: none;
}
.patent_tag_info {
  height: 24px;
  line-height: 24px;
  background: #6a7687;
  border-radius: 4px;
  border: none;
}
.patent_tag_orange {
  height: 24px;
  line-height: 24px;
  background: #ffa033;
  border-radius: 4px;
  border: none;
}

.sz {
  font-size: 18px;
  font-weight: bold;
  color: rgba(51, 119, 255, 1);
}
.zy_color {
  color: #3377ff;
  margin-bottom: 13px;
}
.w {
  width: 703px;
  line-height: 1.5;
}
.introduce {
  display: flex;
  align-items: flex-end;
  margin-top: 24px;
  .context {
    color: #3478ff;
  }
  .ewm {
    width: 95px;
    height: 95px;
    object-fit: cover;
    margin-right: 10px;
    img {
      width: 100%;
      width: 100%;
    }
  }
}
.seeZl {
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  color: rgba(51, 119, 255, 1);
}
.report_box_s {
  background-color: #f7f9fc;
  padding: 38px 30px;
  .report_box_s_o {
    width: 100%;
    .report_items {
      width: 250px;
      height: 109px;
      padding: 0 15px;
      border-radius: 10px;
      background-color: #fff;
      border:2px solid #ebeef5;
      span {
        font-size: 30px;
        font-weight: 400;
        color: #3377ff;
        line-height: 14px;
      }
      p {
        font-size: 16px;
        font-weight: 400;
        color: #1f2e4d;
        margin-top: 23px;
      }
    }
  }
}
.report_items_sz {
  height: 60px;
  line-height: 60px;
  padding-left: 30px;
  background: #f7f9fc;
  border-bottom: 1px solid #e6e9f0;
  font-size: 18px;
  font-weight: 400;
  color: #1f2e4d;
}
</style>
